import React, { Component } from 'react'
import { Button, Card, Table, Modal, message } from 'antd'
import {PAGE_SIZE} from '../../utils/constants'
import { formateDate } from '../../config/dateUtils'
import {reqGetRoleList, reqAddRole, reqUpdataRole} from '../../api/index'
import AddRole from './addRole'
import AutForm from './auth-form'
import memoryUtils from '../../utils/memoryUtils'
import storageUtils from '../../utils/storageUtils'

export default class Role extends Component {

    state={
        data:[], // role 的 列表数据
        isLoading:false,
        isShowAdd:false,
        isShowAuth:false,
        role:{} // 当前选中的对象
     }

     constructor(){
         super()
         this.treeRef = React.createRef()
     }

    initTable = () => {
        this.columns = [
            {
              title: '角色名称',
              dataIndex: 'name',
            },
            {
              title: '创建时间',
              dataIndex: 'create_time',
              render:(create_time)=>formateDate(create_time)
            },
            {
              title: '授权时间',
              dataIndex: 'auth_time',
              render:formateDate
            },
            {
              title: '授权人',
              dataIndex: 'auth_name',
            },
          ];
    }

    showAddModal = () => {
        this.setState({
            isShowAdd: true,
        });
      };

      showAuthModal = () => {
        this.setState({
            isShowAuth: true,
        });
      }

      //   提交表单的验证
      handleSubmit = e => {
        e.preventDefault();
        // 父组件根据子组件传递的form进行表单验证
        this.form.validateFields(async (err, values) => {
          if (!err) {
            this.setState({isShowAdd: false});
            // 重置数据
            this.form.resetFields()
            // 接收表单的数据
            const {roleName} = values
            const result = await reqAddRole(roleName)
            // 发送请求添加数据
            if(result.status===0){
                message.success('添加成功')
                // 更新列表数据
                // this.getRoleList()

                // 如果不发送请求更新数据，那个可以读取state中的值来更新数据
                const role = result.data
                this.setState(state => ({
                    data: [...state.data, role]
                }))
            }else{
                message.error('添加失败')
            }
          }
        });

        
      };

    //   更新角色权限
    handleAuth =async e =>{
        e.preventDefault();
        // 获取数据
        const {role} = this.state
        role.auth_time = Date.now()
        role.auth_name = memoryUtils.user.username
        role.menus = this.treeRef.current.getNewTree()
        
        
        this.setState({isShowAuth: false});
        // 发送请求
        const result = await reqUpdataRole(role)
        console.log(role)
       
        // 发送请求添加数据
        if(result.status===0){
            //如果更新的是当前的角色，需要强制退出重新登录
            if(role._id === memoryUtils.user.role_id){
                // 清空内存中的数据
                storageUtils.removeUser()
                memoryUtils.user = {}
                this.props.history.replace('/login')
                message.info('权限已修改，请重新登录')
            } else{
                // 更新列表数据
                this.getRoleList()
                message.success('角色授权成功')
            }
        }else{
            message.error('角色授权失败')
        }
    }
    

      getRoleList = async ()=>{
           // 发送请求之前显示loading
        this.setState({isLoading:true})
        // 发送请求
        const result =await reqGetRoleList()
        if(result.status === 0){
            // 更新列表数据
            this.setState({
                data:result.data,
                isLoading:false
            })
        }
      }

      getSelectedRole = (selectedRole) => {
        return {
            // 点击行
            onClick: () => {
                // 如果选中就更新state中的role
                this.setState({role:selectedRole})
            }, 
          };
      }


    UNSAFE_componentWillMount(){
        this.initTable()
    }

    componentDidMount(){
       this.getRoleList()
    }

    render() {
        // console.log(this.state.role)
        const title = (
            <header>
                <Button type="primary" style={{marginRight:20}} onClick={this.showAddModal}>创建角色</Button>
                <Button type="primary"  disabled={!this.state.role._id} onClick={
                    this.showAuthModal
                    }>设置角色权限</Button>
            </header> 
        )
        
        return (
            <div>
                <Card title={title}>
                <Table
                    columns={this.columns}
                    dataSource={this.state.data}
                    bordered
                    rowKey="_id"
                    loading={this.state.isLoading}
                    rowSelection={
                        {   type:'radio', 
                            // 选中项的key
                            selectedRowKeys:this.state.role._id,
                            // 用于解决点击单选框但是不会选中的bug
                            onSelect:(role)=>{this.setState({role})}
                        }
                    }
                    pagination={{ defaultPageSize: PAGE_SIZE }}
                    // 用于点击行
                    onRow = {this.getSelectedRole}
                />

                {/* 添加角色 */}
                <Modal
                    title="角色名称"
                    visible={this.state.isShowAdd}
                    onOk={this.handleSubmit}
                    onCancel={()=>{
                        // 重置数据
                        this.form.resetFields()
                        // 弹框消失
                        this.setState({isShowAdd: false})
                    }}
                    >
                        {/* 接收传递过来的form表单 */}
                    <AddRole setForm={form => this.form = form}/>
                </Modal>

                {/* 设置权限 */}
                <Modal
                    title="角色名"
                    visible={this.state.isShowAuth}
                    onOk={this.handleAuth}
                    onCancel={()=>this.setState({isShowAuth: false})}
                    >
                        {/* 将选中的role传递给auth-form */}
                    <AutForm singleRole={this.state.role} ref={this.treeRef}/>
                </Modal>
                </Card>
            </div>
        )
    }
}

/**
 * 
 * 
 * 添加完角色后可以通过发送请求更新列表数据，也可以直接使用state中的data数据
 * 方式一：发送请求更新列表数据（再次调用这个方法）
 * this.getRoleList()
 * 
 * 方式二：直接使用state中的data数据
 * const role = result.data
    this.setState(state => ({
        data【state中的data】: [...state.data, role]
    }))
 * 
 * 
 * 
 * 
 * 1. table 中 使用 radio，需要通过使用 rowSelection配置参数
 * 2. table 中 需要想要获取选中行的内容，可以通过 onRow定义的函数 来获取
 * 
 * 
 * 
 *  <Table
        rowSelection={{type:'radio'}}
        // 用于点击行
        onRow = {this.getSelectedRole}
    />
 * 
 * getSelectedRole = (selectedRole) => {
        return {
            // 点击行
            onClick: () => {
                console.log(selectedRole)
            }, 
          };
      }
 * 
 * 
 * 3. table 中 如果点击行，不是点击到radio，对应行的radio选中， 需要添加 selectedRowKeys 配置对象
 *(在state中定义一个对象，如果选中当前行那就将对象存到state中，在table中需要使用selectedRowKeys 来接收role的id)
 * 
 * 4. 定义一个按钮是否可以选中
 * disabled={!this.state.role._id}
 * 
 * 
 * 
 * =====================================================
 * 授权角色成功后，需要判断修改的权限是否是当前用户的权限，如果是需要强制跳转，清空内存，localstorage中的数据
 * 
 * if (role._id === memoryUtils.user.role_id) {
        memoryUtils.user = {}
        storageUtils.removeUser()
        this.props.history.replace('/login')
        message.success('当前用户角色权限成功')
      } else {
        message.info('设置角色权限成功')
        this.getRoleList()
      }
 * 
 * 
 */
